Zdokonaľte sa v Navigation API: Smerovanie a správa histórie v Single Page aplikáciách

Navigation API predstavuje významný pokrok v spôsobe, akým pristupujeme k smerovaniu a správe histórie v rámci Single Page aplikácií (SPA). Tradičné metódy sa často spoliehajú na manipuláciu s objektom `window.location` alebo na využívanie knižníc tretích strán. Hoci nám tieto prístupy dobre slúžili, Navigation API ponúka zjednodušené, výkonnejšie a na funkcie bohatšie riešenie, ktoré poskytuje vývojárom väčšiu kontrolu nad navigačným zážitkom používateľa.

Čo je Navigation API?

Navigation API je moderné API prehliadača navrhnuté na zjednodušenie a vylepšenie spôsobu, akým SPA spravujú navigáciu, smerovanie a históriu. Zavádza nový objekt `navigation`, ktorý poskytuje metódy a udalosti umožňujúce vývojárom zachytiť a kontrolovať navigačné udalosti, aktualizovať URL a udržiavať konzistentnú históriu prehliadania bez úplného znovunačítania stránky. Výsledkom je rýchlejší, plynulejší a responzívnejší používateľský zážitok.

Výhody používania Navigation API

• Zvýšený výkon: Elimináciou úplného znovunačítania stránky Navigation API výrazne zlepšuje výkonnosť SPA. Prechody medzi rôznymi zobrazeniami sa stávajú rýchlejšími a plynulejšími, čo vedie k pútavejšiemu používateľskému zážitku.
• Rozšírená kontrola: API poskytuje detailnú kontrolu nad navigačnými udalosťami, čo umožňuje vývojárom zachytiť a podľa potreby upraviť správanie navigácie. To zahŕňa zabránenie navigácii, presmerovanie používateľov a vykonávanie vlastnej logiky pred alebo po navigácii.
• Zjednodušená správa histórie: Správa zásobníka histórie prehliadača je s Navigation API jednoduchšia. Vývojári môžu programovo pridávať, nahrádzať a prechádzať položky histórie, čím sa zabezpečí konzistentný a predvídateľný zážitok z prehliadania.
• Deklaratívna navigácia: Navigation API podporuje deklaratívnejší prístup k smerovaniu, čo umožňuje vývojárom definovať navigačné pravidlá a správanie jasným a stručným spôsobom. To zlepšuje čitateľnosť a udržiavateľnosť kódu.
• Integrácia s modernými frameworkami: Navigation API je navrhnuté tak, aby sa bez problémov integrovalo s modernými JavaScriptovými frameworkami a knižnicami, ako sú React, Angular a Vue.js. To umožňuje vývojárom využívať funkcie API v rámci svojich existujúcich vývojových postupov.

Základné koncepty a funkcie

1. Objekt `navigation`

Srdcom Navigation API je objekt `navigation`, ktorý je dostupný cez globálny objekt `window` (t. j. `window.navigation`). Tento objekt poskytuje prístup k rôznym vlastnostiam a metódam súvisiacim s navigáciou, vrátane:

• `currentEntry`: Vráti objekt `NavigationHistoryEntry` predstavujúci aktuálnu položku v histórii navigácie.
• `entries()`: Vráti pole objektov `NavigationHistoryEntry` predstavujúcich všetky položky v histórii navigácie.
• `navigate(url, { state, info, replace })`: Naviguje na novú URL.
• `back()`: Naviguje späť na predchádzajúcu položku v histórii.
• `forward()`: Naviguje vpred na nasledujúcu položku v histórii.
• `reload()`: Znovu načíta aktuálnu stránku.
• `addEventListener(event, listener)`: Pridá poslucháča udalostí pre udalosti súvisiace s navigáciou.

2. `NavigationHistoryEntry`

Rozhranie `NavigationHistoryEntry` predstavuje jednu položku v histórii navigácie. Poskytuje informácie o položke, ako sú jej URL, stav a jedinečné ID.

• `url`: URL adresa položky v histórii.
• `key`: Jedinečný identifikátor pre položku v histórii.
• `id`: Ďalší jedinečný identifikátor, obzvlášť užitočný na sledovanie životného cyklu navigačnej udalosti.
• `sameDocument`: Booleovská hodnota indikujúca, či navigácia vedie k navigácii v rámci toho istého dokumentu.
• `getState()`: Vráti stav priradený k položke v histórii (nastavený počas navigácie).

3. Navigačné udalosti

Navigation API vysiela niekoľko udalostí, ktoré umožňujú vývojárom monitorovať a riadiť navigačné správanie. Tieto udalosti zahŕňajú:

• `navigate`: Vysiela sa pri iniciovaní navigácie (napr. kliknutím na odkaz, odoslaním formulára alebo volaním `navigation.navigate()`). Je to primárna udalosť na zachytenie a spracovanie navigačných požiadaviek.
• `navigatesuccess`: Vysiela sa po úspešnom dokončení navigácie.
• `navigateerror`: Vysiela sa pri zlyhaní navigácie (napr. v dôsledku sieťovej chyby alebo neošetrenej výnimky).
• `currentchange`: Vysiela sa pri zmene aktuálnej položky v histórii (napr. pri navigácii vpred alebo vzad).
• `dispose`: Vysiela sa, keď `NavigationHistoryEntry` už nie je dostupná, napríklad keď je odstránená z histórie počas operácie `replaceState`.

Implementácia smerovania s Navigation API: Praktický príklad

Ukážme si, ako použiť Navigation API na implementáciu základného smerovania v jednoduchej SPA. Predstavte si aplikáciu s tromi zobrazeniami: Domov, O nás a Kontakt.

Najprv vytvorte funkciu na spracovanie zmien trasy:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Domov
Vitajte na domovskej stránke!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
O nás
Zistite o nás viac.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Spojte sa s nami.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nenájdené
Stránka sa nenašla.
';
  }
}

Ďalej pridajte poslucháča udalostí k udalosti `navigate`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Zabraňuje predvolenej navigácii prehliadača

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Vyrieši promise po spracovaní trasy
  });

  event.transition = promise;
});

Tento kód zachytáva udalosť `navigate`, extrahuje URL z objektu `event.destination`, zabraňuje predvolenej navigácii prehliadača, volá `handleRouteChange` na aktualizáciu obsahu a nastavuje promise `event.transition`. Nastavenie `event.transition` zabezpečí, že prehliadač počká na dokončenie aktualizácie obsahu pred vizuálnou aktualizáciou stránky.

Nakoniec môžete vytvoriť odkazy, ktoré spúšťajú navigáciu:

Domov | O nás | Kontakt

A pripojte k týmto odkazom poslucháča kliknutí:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

Týmto sa nastaví základné smerovanie na strane klienta pomocou Navigation API. Teraz kliknutie na odkazy spustí navigačnú udalosť, ktorá aktualizuje obsah `div`-u s `id="content"` bez úplného znovunačítania stránky.

Pridanie správy stavu

Navigation API vám tiež umožňuje priradiť stav ku každej položke v histórii. To je užitočné na uchovávanie dát medzi navigačnými udalosťami. Upravme predchádzajúci príklad tak, aby obsahoval objekt stavu.

Pri volaní `navigation.navigate()` môžete odovzdať objekt `state`:

window.navigation.navigate('/about', { state: { pageTitle: 'O nás' } });

Vnútri poslucháča udalosti `navigate` môžete pristupovať k stavu pomocou `event.destination.getState()`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Moja Aplikácia'; // Predvolený titulok

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Domov
Vitajte na domovskej stránke!
';
      title = 'Domov';
      break;
    case '/about':
      contentDiv.innerHTML = '
O nás
Zistite o nás viac.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakt
Spojte sa s nami.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nenájdené
Stránka sa nenašla.
';
      title = '404 Nenájdené';
  }
  document.title = title;
}

V tomto upravenom príklade funkcia `handleRouteChange` teraz prijíma parameter `state` a používa ho na aktualizáciu titulku dokumentu. Ak sa žiadny stav neodošle, predvolená hodnota je 'Moja Aplikácia'.

Použitie `navigation.updateCurrentEntry()`

Niekedy môžete chcieť aktualizovať stav aktuálnej položky v histórii bez spustenia novej navigácie. Metóda `navigation.updateCurrentEntry()` vám to umožňuje. Napríklad, ak používateľ zmení nastavenie na aktuálnej stránke, môžete aktualizovať stav, aby odrážal túto zmenu:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Nastavenie aktualizované:', setting, 'na', value);
}

// Príklad použitia:
updateUserSetting('theme', 'dark');

Táto funkcia získa aktuálny stav, zlúči do neho aktualizované nastavenie a potom aktualizuje aktuálnu položku v histórii novým stavom.

Pokročilé prípady použitia a úvahy

1. Spracovanie odoslania formulárov

Navigation API je možné použiť na spracovanie odoslania formulárov v SPA, čím sa zabráni úplnému znovunačítaniu stránky a poskytne sa plynulejší používateľský zážitok. Môžete zachytiť udalosť odoslania formulára a použiť `navigation.navigate()` na aktualizáciu URL a zobrazenie výsledkov bez úplného znovunačítania stránky.

2. Asynchrónne operácie

Pri spracovaní navigačných udalostí možno budete musieť vykonávať asynchrónne operácie, ako je napríklad načítavanie dát z API. Vlastnosť `event.transition` vám umožňuje priradiť k navigačnej udalosti promise, čím sa zabezpečí, že prehliadač počká na dokončenie asynchrónnej operácie pred aktualizáciou stránky. Pozrite si príklady vyššie.

3. Obnovenie pozície rolovania

Udržiavanie pozície rolovania počas navigácie je kľúčové pre poskytovanie dobrého používateľského zážitku. Navigation API poskytuje mechanizmy na obnovenie pozície rolovania pri navigácii späť alebo vpred v histórii. Môžete použiť vlastnosť `scroll` objektu `NavigationHistoryEntry` na uloženie a obnovenie pozície rolovania.

4. Spracovanie chýb

Je dôležité spracovávať chyby, ktoré sa môžu vyskytnúť počas navigácie, ako sú sieťové chyby alebo neošetrené výnimky. Udalosť `navigateerror` vám umožňuje elegantne zachytiť a spracovať tieto chyby, čím zabránite pádu aplikácie alebo zobrazeniu chybovej správy používateľovi.

5. Progresívne vylepšovanie

Pri vytváraní SPA s Navigation API je dôležité zvážiť progresívne vylepšovanie. Uistite sa, že vaša aplikácia funguje správne, aj keď prehliadač nepodporuje Navigation API. Môžete použiť detekciu funkcií na kontrolu prítomnosti objektu `navigation` a v prípade potreby sa vrátiť k tradičným metódam smerovania.

Porovnanie s tradičnými metódami smerovania

Tradičné metódy smerovania v SPA sa často spoliehajú na manipuláciu s objektom `window.location` alebo na použitie knižníc tretích strán, ako sú `react-router` alebo `vue-router`. Hoci sú tieto metódy široko používané a osvedčené, majú určité obmedzenia:

• Úplné znovunačítanie stránky: Priama manipulácia s `window.location` môže spustiť úplné znovunačítanie stránky, čo môže byť pomalé a rušivé pre používateľský zážitok.
• Zložitosť: Správa histórie a stavu pomocou tradičných metód môže byť zložitá a náchylná na chyby, najmä vo veľkých a komplexných aplikáciách.
• Výkonnostná réžia: Knižnice tretích strán pre smerovanie môžu pridať značnú výkonnostnú réžiu, najmä ak nie sú optimalizované pre špecifické potreby vašej aplikácie.

Navigation API rieši tieto obmedzenia tým, že poskytuje zjednodušené, výkonnejšie a na funkcie bohatšie riešenie pre smerovanie a správu histórie. Eliminuje úplné znovunačítanie stránky, zjednodušuje správu histórie a poskytuje detailnú kontrolu nad navigačnými udalosťami.

Kompatibilita s prehliadačmi

Koncom roka 2024 sa Navigation API teší dobrej podpore v moderných prehliadačoch, vrátane Chrome, Firefox, Safari a Edge. Vždy je však dobrým zvykom skontrolovať najnovšie informácie o kompatibilite prehliadačov na zdrojoch ako Can I use pred implementáciou Navigation API vo vašich produkčných aplikáciách. Ak je podpora starších prehliadačov nutnosťou, zvážte použitie polyfillu alebo záložného mechanizmu.

Záver

Navigation API je mocný nástroj na budovanie moderných a výkonných SPA s pokročilými možnosťami smerovania a správy histórie. Využitím funkcií API môžu vývojári vytvárať rýchlejšie, plynulejšie a pútavejšie používateľské zážitky. Hoci počiatočná krivka učenia môže byť o niečo strmšia v porovnaní s používaním jednoduchších, starších metód, výhody Navigation API, najmä v komplexných aplikáciách, z neho robia investíciu, ktorá sa oplatí. Osvojte si Navigation API a odomknite plný potenciál svojich SPA.

Ďalšie zdroje

• MDN Web Docs: Navigation API
• Špecifikácia WICG Navigation API